<template>
<div id="wrap">
  <div id="home">
    <!-- line-width 下划线的宽度 -->
    <tab :line-width=2 active-color='#10c5b6' v-model="index" :custom-bar-width="getBarWidth" bar-active-color="#10c5b6">
      <tab-item class="vux-center" :selected="tabTitle === item" v-for="(item, index) in tabList" @click="tabTitle = item" :key="index">{{item}}</tab-item>
    </tab>
    <div v-if="index==0" id="home-content" class="content-block content content-top">
      <div id="tab1" ref="tab1">
        <div class="list-block infinite-list">
          <scroller style="top: -18px"
              ref="homeScroller"
              :on-refresh="refreshHome"
              :on-infinite="infiniteHome">
          <group>
            <router-link to="/home/writePoint" class="h-write-point">
              <cell title="每天写写更健康">
                <icon style="float:right;color: #10c5b6" name="pencil-square-o" scale="1.5"></icon>
              </cell>
            </router-link>
          </group>
          <div class="list-block media-list" style="margin-top:5px;">
            <ul>
              <li v-for="(point, idx) in points" style="border-bottom: dotted 1px rgb(16, 197, 182);">
                  <div class="item-content">
                    <div class="item-media">
                      <router-link :to="{path: '/me/info', query: { id: point.customer.id }}" class="h-write-point">
                      <img v-bind:src="point.customer.avatar" style='width: 2.2rem;height: 2.2rem;'>
                      </router-link>
                    </div>
                    <div class="item-inner">
                        <div class="userProfile">
                            <div class="item-title-row">
                            <div class="item-title">{{point.customer.nickname}}</div>
                            </div>
                            <div class="item-subtitle" style="font-size: 0.75rem;">{{point.cmsViewPoint.diffTime}}前</div>
                        </div>
                        <div class="userSchool">{{point.customer.customerBaseExtend.schoolName}}</div>
                    </div>
                  </div>
                  <div class="" style="padding-bottom: 5px;">
                      <div class="card-content">
                        <div class="card-content-inner">{{point.cmsViewPoint.pointText}}</div>
                        <div style="margin-left: 3.75rem;" v-if="point.cmsViewPoint.pointImg != '' && point.cmsViewPoint.pointImg != null" class="card-content">
                          <div style="height: 200px;width:90%;margin-bottom: 5px;" @click="preview(point.cmsViewPoint.pointImg)" v-lazy:background-image="point.cmsViewPoint.pointImg"></div>
                        </div>
                      </div>
                  </div>
                  <div style="height: 30px; margin-top:0;">
                    <div slot="content" class="card-padding" style="text-align:right;hight:20px;">
                      <router-link :to="{path: '/home/comments', query: { id: point.cmsViewPoint.id }}" class="h-write-point">
                        <span style="font-size:12px;color: #999999;margin-right: 30px;height: 20px;display: block;float: right;">
                          {{point.cmsViewPoint.commentCount}}
                        </span>
                        <span @click="clickComment" style="margin-right: 5px;height: 20px;display: block;float: right;">
                          <icon style="color: #999999" name="comments-o" scale="1.0"></icon>
                        </span>
                      </router-link>
                      <span @click="clickLike(point.cmsViewPoint.id, $event, point.cmsViewPoint.ifFavort, idx)" style="font-size:12px;color: #999999;margin-right: 30px;height: 20px;display: block;float: right;">
                        {{point.cmsViewPoint.favortCount}}
                      </span>
                      <span @click="clickLike(point.cmsViewPoint.id, $event, point.cmsViewPoint.ifFavort, idx)" style="margin-right: 5px;height: 20px;display: block;float: right;">
                        <icon v-if="point.cmsViewPoint.ifFavort == 1" style="color: #999999" name="thumbs-up" scale="1.0"></icon>
                        <icon v-if="point.cmsViewPoint.ifFavort == 2" style="color: #999999" name="thumbs-o-up" scale="1.0"></icon>
                      </span>
                    </div>
                  </div>
              </li>
            </ul>
          </div>
          </scroller>
        </div>
	  </div>
      </div>
      <div v-if="index==1" >
        <!--<div>
          <span @click="">添加</span>
          <span style="float:right;" @click="">删除</span>
        </div>-->
        <scroller style="top: 60px"
              ref="topicScroller"
              :on-refresh="refreshTopic"
              :on-infinite="infiniteTopic">
          <div class="list-block infinite-list" >
            <div style="margin: 10px;" v-for="item in topics">
              <masker style="border-radius: 2px;">
                <div slot="content" class="m-title"  :style="{backgroundImage: 'url(' + item.img + ')' }">
                  <router-link :to="{ path: '/home/topic', query: { id: item.id }}">
                  <h3 style="color:white">#{{item.title}}#</h3>
                  <p style="padding: 5px;color:white">期待你的观点{{item.id}}</p>
                  <span class="m-time">{{item.createTime}}</span>
                  </router-link>
                  <p style="" class="follow">关注</p>
                </div>
              </masker>
            </div>
          </div>
          </scroller>
      </div>
    </div>
    <flyray-tabbar></flyray-tabbar>
  </div>
</template>

<script>
const list = () => ['圈子', '话题']

import FlyrayTabbar from '@/components/FlyrayTabbar'
import { Tab, TabItem, Panel, Masker, Cell, Group, Card, Toast } from 'vux'
import Icon from 'vue-awesome'
import { getCustomerId } from '../utils/utils'
import { ajaxPost } from '../utils/axiosHttp'
import { getShareParamsInit } from '../utils/wxJsSdkUtils'
import wx from 'weixin-js-sdk'

export default {
  components: {
    Tab,
    TabItem,
    Panel,
    Masker,
    Cell,
    Group,
    Icon,
    Card,
    FlyrayTabbar,
    Toast
  },
  data () {
    return {
      idx: 0,
      getBarWidth: function (idx) {
        return (idx + 1) * 22 + 'px'
      },
      tabList: list(),
      tabTitle: '圈子',
      index: 0,
      circles: [],
      points: [],
      topics: [],
      currentPage: '0',
      currentPageTopic: '0',
      position: 'default',
      showPositionValue: false,
      noData: '',
      noDataTopic: '',
      customerId: getCustomerId()
    }
  },
  created: function () {
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  mounted () {
    console.log(this.$router.history.current)
    let path = this.$router.history.current.path
    if (path === '/home') {
      console.log('路径是一个home')
    }
    console.log(this.$router.currentRoute.query.customerId)
    let customerIdV = this.$router.currentRoute.query.customerId
    if (customerIdV !== undefined) {
      this.customerId = customerIdV
      window.localStorage.setItem('customerId', this.customerId)
      console.log(window.localStorage.getItem('customerId'))
    }

    let bizId = ''

    getShareParamsInit(path, this.customerId, bizId, '棱镜社-忠于未知，活出理想', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510586585372&di=4475bbebad8646dde24b6ebf24c8db3e&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201209%2F25%2F20120925232033_HSZCS.jpeg', '来遇到一群有趣的人，做一些有趣的事')

    let data = {
      'customerId': this.customerId
    }

    let resCustomerQuery = ajaxPost(data, 'api/cms/me/customer/query')
    console.log(resCustomerQuery)
    resCustomerQuery.then(function (result) {
      console.log('result')
      console.log(result)
      console.log('将查询到的会员缓存到本地')
      let customerBase = result.data.customerBase
      console.log(JSON.stringify(customerBase))
      window.localStorage.setItem('customerBase', JSON.stringify(customerBase))
      console.log(JSON.parse(window.localStorage.getItem('customerBase')))
    })

    let self = this

    this.top = [1, 1]
    this.bottom = [10, 10]
    console.log('mounted')
    let topicsQd = {
      'currentPage': '0',
      'pageSize': '10',
      'customerId': this.customerId
    }

    let resTopicsQuery = ajaxPost(topicsQd, 'api/cms/home/topics/query')
    console.log(resTopicsQuery)
    resTopicsQuery.then(function (result) {
      console.log(result)
      console.log(result.pagination.currentPage)
      self.currentPageMe = result.pagination.currentPage + 1
      self.currentPageTopic = result.pagination.currentPage + 1
      var prodctLastItems = result.data
      self.topics = prodctLastItems
      console.log(self.topics)
    })
  },
  destroyed () {
    console.log('destroyed 销毁完成状态===============》')
  },
  methods: {
    showPosition: function (position) {
      this.position = position
      this.showPositionValue = true
    },
    refreshHome: function (done) {
      console.log('下拉刷新首页数据')
      console.log('refreshHome')
      var self = this
      this.noData = true
      setTimeout(() => {
        self.points = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': '0',
            'pageSize': '10',
            'customerId': this.customerId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/home/viewpoints/query', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.length)
          console.log(response.data.pagination.currentPage)
          self.currentPage = response.data.pagination.currentPage + 1
          self.points = response.data.data
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteHome: function (done) {
      console.log('上拉加载首页数据')
      console.log('infiniteHome')
      var self = this
      if (this.noData) {
        console.log(this.noData)
        this.noData = false
        self.$refs.homeScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': self.currentPage,
            'pageSize': '10',
            'customerId': this.customerId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/home/viewpoints/query', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.currentPage = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.noData = '没有更多数据'
            self.$refs.homeScroller.finishInfinite(true)
            return
          }
          var data = response.data.data
          var start = data.length
          for (var i = 0; i < start; i++) {
            self.points.push(data[i])
          }
          self.bottom[0] = self.bottom[0] + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    },
    refreshTopic: function (done) {
      console.log('下拉刷新首页话题数据')
      console.log('refreshTopic')
      var self = this
      this.noDataTopic = true
      setTimeout(() => {
        self.points = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': self.currentPage,
            'pageSize': '10',
            'customerId': this.customerId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/home/topics/query', config).then(function (response) {
          console.log(response)
          console.log(response.data.data.length)
          console.log(response.data.pagination.currentPage)
          self.currentPageTopic = response.data.pagination.currentPage + 1
          self.topics = response.data.data
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteTopic: function (done) {
      console.log('上拉加载首页话题数据')
      console.log('infiniteTopic')
      var self = this
      if (this.noDataTopic) {
        console.log(this.noDataTopic)
        this.noDataTopic = false
        self.$refs.topicScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'currentPage': self.currentPageTopic,
            'pageSize': '10',
            'customerId': this.customerId
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/home/topics/query', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.currentPageTopic = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.noDataTopic = '没有更多数据'
            self.$refs.topicScroller.finishInfinite(true)
            return
          }
          var data = response.data.data
          var start = data.length
          for (var i = 0; i < start; i++) {
            self.topics.push(data[i])
          }
          self.bottom[1] = self.bottom[1] + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    },
    clickHeader () {
      console.log('点击了clickHeader')
    },
    clickItem () {
      console.log('点击了clickItem')
    },
    clickComment () {
      console.log('点击了clickComment')
    },
    clickLike (pointId, e, ifFavort, index) {
      console.log('点击了clickLike' + index)
      console.log(e.target)
      var status = this.points[index].cmsViewPoint.ifFavort
      if (ifFavort === 1) {
        this.points[index].cmsViewPoint.ifFavort = 2
        this.points[index].cmsViewPoint.favortCount = this.points[index].cmsViewPoint.favortCount - 1
      } else {
        this.points[index].cmsViewPoint.ifFavort = 1
        this.points[index].cmsViewPoint.favortCount = this.points[index].cmsViewPoint.favortCount + 1
      }
      var self = this
      console.log('pointId:' + self.points[index].cmsViewPoint.id)
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'pointId': self.points[index].cmsViewPoint.id,
          'favortStatus': status,
          'customerId': this.customerId
        },
        responseType: 'json',
        method: 'post'
      }
      self.$ajax('api/cms/home/viewpoints/doFavort', config).then(function (response) {
        console.log(response)
        console.log(response.data.code)
      }).catch(function (error) {
        console.log(error)
      })
    },
    preview (src) {
      /* eslint-disable no-undef */
      wx.previewImage({
        current: src,
        urls: [src]
      })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';

.box {
  padding: 15px;
}
.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}

.vux-tab .vux-tab-item.vux-tab-selected{
    color: #10c5b6;
    border-bottom: 5px solid #10c5b6;
}

.vux-tab-bar-inner {
    display: block;
    background-color: #10c5b6 !important;
    margin: auto;
    height: 100%;
    -webkit-transition: width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    transition: width 0.3s cubic-bezier(0.35, 0, 0.25, 1);
}
.m-img {
  padding-bottom: 33%;
  display: block;
  position: relative;
  max-width: 100%;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
  border-radius: 2px;
  height:25px;
}

.m-title {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  font-weight: 500;
  font-size: 16px;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height:100%;
  background-color: white;
  text-align: center;
  top: 50%;
  padding-top:5px;
  transform: translateY(-50%);
}

.m-time {
  font-size: 12px;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
  display: inline-block;
  margin-top: 5px;
  color: #fff;
}

.list-block {
    margin: 0.75rem 0;
    font-size: 0.85rem;
}
.list-block ul {
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.list-block li {
    box-sizing: border-box;
    position: relative;
}
.list-block .item-content {
    box-sizing: border-box;
    padding-left: 0.75rem;
    min-height: 2.2rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.list-block.media-list .item-media {
    padding-top: 0.45rem;
    padding-bottom: 0.5rem;
}
.list-block .item-media {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-top: 0.35rem;
    padding-bottom: 0.4rem;
}
.list-block.media-list .item-media img {
    display: block;
}
.list-block.media-list .item-inner {
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.45rem;
    -webkit-align-self: stretch;
    align-self: stretch;
}

.list-block .item-media + .item-inner {
    margin-left: 0.75rem;
}

.list-block .item-inner {
    padding-right: 0.75rem;
    position: relative;
    width: 100%;
    padding-top: 0.4rem;
    padding-bottom: 0.35rem;
    min-height: 2.2rem;
    overflow: hidden;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.userProfile {
    float: left;
    line-height: 1.1rem;
    font-size: 0.75rem;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.list-block.media-list .item-title-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.list-block.media-list .item-title {
    font-weight: 500;
}
.list-block .item-subtitle {
    font-size: 0.75rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
}
.userSchool {
    line-height: 2.2rem;
    float: right;
    font-size: 0.75rem;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.card-content-inner{
  margin-left: 3.75rem;
}
.follow{
  color: #ff8989;
  border-color: #ff8989;
  border-radius: 4px;
  border: 1px solid;
  width: 80px;
  margin: 0 auto;
}
.h-write-point{
  color: #666;
}
.vux-masker-box{
  height:130px;
}
a {
  text-decoraction: none;
}
.router-link-active {
  text-decoration: none;
}
</style>
